<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
<html lang="en" class="app">
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="<c:url value='/css/app.v2.css'></c:url>" type="text/css" />
</head>
<body>
						<section class="vbox">
							<section class="scrollable padder">
								<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
									<li>
										<a href="index.html"><i class="fa fa-home"></i> 主页</a>
									</li>
									<li class="active">用户管理</li>
									<li class="active">员工信息管理</li>
								</ul>
								<div class="m-b-md">
									<h3 class="m-b-none">员工信息列表</h3>
									<button type="button" class="btn btn-info pull-right " data-toggle="modal" data-target="#add">新增</button>
									<br><br>	
									<input type="text" placeholder="搜索" id="search" name="serach">	<button type="button" class="btn btn-info" onclick="searchUser()">搜索</button>						
								</div>
								
								<section class="panel panel-default">
									<header class="panel-heading">员工列表</header>
									<div class="table-responsive">
										<table id="MyStretchGrid" class="table table-striped datagrid m-b-sm">
											<thead>
												<tr>
													<th>序号</th>
													<th>ID</th>
													<th>姓名</th>
													<th>性别</th>
													<th>用户名</th>
													<th>联系方式</th>
													<th>描述</th>
													<th>所属部门</th>
													<th>职位名称</th>
													<th>编辑</th>
													<th>删除</th>
												</tr>
											</thead>
											<tbody class="formtable">
											<c:forEach items="${userList}" var="user" varStatus="status">
												<tr>
													<td>${status.index +1 }</td>
													<td>${user.id }</td>
													<td>${user.name }</td>
													<td>${user.gender }</td>
													<td>${user.loginname }</td>
													<td>${user.phonenumber }</td>
													<td>${user.description }</td>
													<td>${user.departmentname }</td>
													<td>${user.rolename }</td>
													<td>
														<a  class="edit" data-toggle="modal" type="button" data-target="#edit" onclick="returnUser(${user.id});" >
															<i class="fa fa-pencil"></i>
														</a>
													</td>
													<td>
														<a type="button" onclick="sureDelete(${user.id});">
															<i class="fa fa-trash-o"></i>
														</a>
													</td>
												</tr>
											</c:forEach>
											</tbody>
										</table>
										<nav class="pull-right">
										  <ul class="pagination ">
										    <li><a href="<c:url value='/user/getUserList?pageId=1&search=${userVO.search}'></c:url>">首页</a></li>
										    <c:if test="${userVO.currentPage > 1}">
										    	<li><a href="<c:url value='/user/getUserList?pageId=${userVO.currentPage -1}&search=${userVO.search}'></c:url>">上一页</a></li>
										    </c:if>
											<li><a href='<c:url value='/user/getUserList?pageId=${userVO.currentPage}&search=${userVO.search}'></c:url>'>${userVO.currentPage }</a></li>
										    <c:if test="${userVO.currentPage < userVO.totalPage}">
										    	<li><a href="<c:url value='/user/getUserList?pageId=${userVO.currentPage +1}&search=${userVO.search}'></c:url>">下一页</a></li>
										    </c:if>
										    <li><a href="<c:url value='/user/getUserList?pageId=${userVO.totalPage}&search=${userVO.search}'></c:url>">尾页</a></li>
										     
										    <li>总页数：${userVO.totalPage}</li>
										    <li>总记录数：${userVO.totalCount}</li>
										  </ul>
										</nav>
									</div>
								</section>

							</section>
						</section>
						<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
					</section>
					<aside class="bg-light lter b-l aside-md hide" id="notes">
						<div class="wrapper">Notification</div>
					</aside>
				</section>
			</section>

		<!--
        	作者：offline
        	时间：2016-12-26
        	描述：摸态框 add
        -->
		<!-- Modal -->
		<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title" id="myModalLabel">添加员工信息</h4>
					</div>
					<div class="modal-body">
						<form role="form" >
							<div class="form-group">
								<label for="name">姓名</label>
								<input type="text" class="form-control" id="name" placeholder="姓名">
							</div>
							<div class="form-group" id="gender">
								<label for="gender">性别</label>
								<input type="radio"  name="gender" value="男">男  &nbsp;&nbsp;
								<input type="radio"  name="gender" value="女">女 
							</div>
							<div class="form-group">
								<label for="loginname">用户名</label>
								<input type="text" class="form-control" id="loginname" placeholder="输入用户名">
							</div>
							<div class="form-group">
								<label for="password">密码</label>
								<input type="text" class="form-control" id="password" placeholder="密码" value="123456" disabled="disabled">
							</div>
							<div class="form-group">
								<label for="phonenumber">联系方式</label>
								<input type="text" class="form-control" id="phonenumber" placeholder="输入联系方式">
							</div>
							<div class="form-group">
								<label for="description">描述</label>
								<input type="text" class="form-control" id="description" placeholder="简单的描述">
							</div>
							<div class="form-group">
								<label for="departmentname">所属部门</label>
								<select class="form-control" id="departmentid">
									<option>请选择所属部门</option>
									<c:forEach items="${departmentList}" var="department" >
										<option value="${department.id}">${department.name}</option>
									</c:forEach>
								</select>
							</div>
							<div class="form-group">
								<label for="rolename">职位名称</label>
								<select class="form-control" id="roleid">
									<option>请选择职业</option>
									<c:forEach items="${roleList}" var="role">
									<option value="${role.id}">${role.name}</option>
									</c:forEach>
								</select>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button id="btn" type="button" class="btn btn-primary" >提交</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Modal -->
		<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title" id="myModalLabel">修改员工信息</h4>
					</div>
					<div class="modal-body">
						<form role="form" >
						<input type="hidden" id="userid"> 
						<div class="form-group">
								<label for="ename">姓名</label>
								<input type="text" class="form-control" id="ename" placeholder="姓名">
							</div>
							<div class="form-group" id="edit">
								<label >性别</label> &nbsp;&nbsp;
								<input type="radio"  name="gender" value="男">男  &nbsp;&nbsp;
								<input type="radio"  name="gender" value="女">女 
							</div>
							<div class="form-group">
								<label for="eloginname">用户名</label>
								<input type="text" class="form-control" id="eloginname" placeholder="输入用户名">
							</div>
							<div class="form-group">
								<label for="epassword">密码</label>
								<input type="text" class="form-control" id="epassword" placeholder="密码" value="123456" disabled="disabled">
							</div>
							<div class="form-group">
								<label for="ephonenumber">联系方式</label>
								<input type="text" class="form-control" id="ephonenumber" placeholder="输入联系方式">
							</div>
							<div class="form-group">
								<label for="edescription">描述</label>
								<input type="text" class="form-control" id="edescription" placeholder="简单的描述">
							</div>
							<div class="form-group">
								<label for="edepartmentname">所属部门</label>
								<select class="form-control" id="edepartmentid">
									<option>请选择所属部门</option>
									<c:forEach items="${departmentList}" var="department" >
										<option value="${department.id}">${department.name}</option>
									</c:forEach>
								</select>
							</div>
							<div class="form-group">
								<label for="erolename">职位名称</label>
								<select class="form-control" id="eroleid">
									<option>请选择职业</option>
									<c:forEach items="${roleList}" var="role">
									
									<option value="${role.id}">${role.name}</option>
									</c:forEach>
								</select>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button id="updateBtn" type="button" class="btn btn-primary" >更新</button>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<script src="<c:url value='/js/jquery-3.1.0.min.js'></c:url>"></script>
		<script src="<c:url value='/js/app.v2.js'></c:url>"></script>
		<script src="<c:url value='/js/layer.js'></c:url>"></script>
		<script src="<c:url value='/js/user.js'></c:url>"></script>
		<script>
		  var form = document.getElementById('form')
			
		  
		  $('form').submit(function (e) {
		  e.preventDefault()
		  console.log(this.name)
		  if (this.name.value === '') {
		    alert('姓名不能为空')
		  } else if (this.loginname.value === '') {
		    alert('用户名不能为空')
		  } else if (this.phonenumber.value === '') {
		    alert('联系方式不能为空')
		  } else if (!(/^1[34578]\d{9}$/.test(this.phonenumber.value))) {
		    alert('手机格式不正确')
		  }
		})
</script>
</body>
</html>